<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>无忧微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body class="bg">
		<div class="m-process">
			<h3 class="header f-pr">
				<span>项目历程</span>
				<i class="icon-angle-left f-pa" @tap="back()"></i>
			</h3>
			<div class="process">
				<div class="step active">
					<i class="circle f-fl"><img src="../images/process-icon-1.png"></i>
					<div class="info">
						<h4>项目上线</h4>
						<p v-text="online_time"></p>
					</div>
				</div>
				<div class="step active">
					<i class="circle f-fl"><img src="../images/process-icon-2.png"></i>
					<div class="info">
						<h4>项目募集</h4>
						<p v-text="bid_start_time"></p>
						<p v-text="bid_end_time"></p>
					</div>
				</div>
				<div class="step" v-bind:class="{ active: is_loan }">
					<i class="circle f-fl"><img src="../images/process-icon-3.png"></i>
					<div class="info">
						<h4>项目放款</h4>
						<p v-text="loan_time"></p>
					</div>
				</div>
				<div class="step" v-bind:class="{ active: is_repayment }">
					<i class="circle f-fl"><img src="../images/process-icon-4.png"></i>
					<div class="info">
						<h4>项目还款</h4>
						<p v-text="repayment"></p>
						<p v-text="un_repayment"></p>
						<p v-text="repayment_time"></p>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<script type="text/javascript">
			mui.plusReady(function() {
				var vm = new Vue({
					el: '.m-process',
					data: {
						'online_time': '',
						'bid_start_time': '',
						'bid_end_time': '',
						'loan_time': '',
						'un_repayment': '',
						'repayment': '',
						'repayment_time': '',
						'is_loan': false,
						'is_repayment': false,
					},
					methods: {
						back: function() {
							mui.back();
						}
					}
				});

				var process = function() {
					mui.ajax(base + 'credit/progress', {
						type: 'get',
						data: {
							'credit': plus.webview.currentWebview().credit
						},
						dataType: 'json',
						headers: sign(md5),
						success: function(data) {
							console.log('项目历程：' + JSON.stringify(data));
							vm.online_time = data.online_time;
							vm.bid_start_time = data.bid_start_time;
							vm.bid_end_time = data.bid_end_time;
							vm.loan_time = data.loan_time;
							vm.un_repayment = data.un_repayment;
							vm.repayment = data.repayment;
							vm.repayment_time = data.repayment_time;
							vm.is_loan = data.loan_time != '' && data.loan_time != null;
							vm.is_repayment = data.is_complete;
						},
						error: function(data) {
							console.error(data.message);
						}
					})
				};

				process();
			});
		</script>
	</body>

</html>